<template>
  <div>
      <Card>
          <div class="title">
              <span>新增剧本</span>
          </div>
          <div class="const">
            <t-form :data="formData" ref="form" :rules="rules" @reset="onReset" @submit="onSubmit" :colon="true" statusIcon>
                <t-form-item label="头像" name="file1" successBorder>
                    <t-upload
                        action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                        v-model="formData.file1"
                        @fail="handleFail"
                        theme="image"
                        :tips="tips"
                        accept="image/*"
                    ></t-upload>
                </t-form-item>
                <t-form-item label="剧本名" name="name" successBorder>
                    <t-input v-model="formData.name" placeholder="请输入内容"></t-input>
                </t-form-item>
                <t-form-item label="剧本作者" name="author" successBorder>
                    <t-input v-model="formData.author" placeholder="请输入内容"></t-input>
                </t-form-item>
                <t-form-item label="剧本幕数" name="screen" successBorder>
                    <t-input v-model="formData.screen" placeholder="请输入内容"></t-input>
                </t-form-item>
                 <t-form-item label="剧本时长" name="time" successBorder>
                     <t-time-range-picker class="demos" clearable v-model="formData.time" format="HH:mm:ss" allow-input />
                </t-form-item>
                <t-form-item label="剧本标签" name="scripttag" successBorder>
                    <t-select v-model="formData.scripttag" placeholder="请选择" multiple>
                        <t-option
                            v-for="item in options2"
                            :value="item.value"
                            :label="item.label"
                            :key="item.value"
                        ></t-option>
                    </t-select>
                    <t-button style="margin-let: '10px'" @click="custom">自定义标签</t-button>
                </t-form-item>
                <t-form-item label="剧本简介" name="Introduction" successBorder>
                     <t-textarea
                        v-model="formData.Introduction"
                        placeholder="请输入简介"
                        name="description"
                    />
                </t-form-item>
                <t-form-item label="角色" name="role" successBorder>
                    <span v-for="(item,index) in addroles" :key="index" style="margin-left: '10px';">
                        <span>角色1</span>
                        <div class="username">梁川</div>
                        <t-button size="small" class="editname" @click="editrole">编辑</t-button>
                        <t-button size="small" style="margin-let: '10px'" theme="danger" @click="rmorole(index)">删除</t-button>
                    </span>
                    <t-button style="margin-let: '10px'" @click="addrole">添加角色</t-button>
                </t-form-item>
                <t-form-item label="dm剧本" name="dmscript" successBorder>
                    <t-button style="margin-let: '10px'" v-if="formData.dmscript == ''" @click="adddm">添加dm剧本</t-button>
                    <p v-else>
                        <span>已添加</span>
                        <t-button style="margin-let: '10px'" @click="editdm">修改dm剧本</t-button>
                    </p>
                </t-form-item>
                <t-form-item label="线索分类" name="classification" successBorder>
                    <t-select v-model="formData.classification" placeholder="请选择" multiple>
                        <t-option
                            v-for="item in options3"
                            :value="item.value"
                            :label="item.label"
                            :key="item.value"
                        ></t-option>
                    </t-select>
                </t-form-item>
                <t-form-item label="添加线索" name="addclues" successBorder>
                    <t-button style="margin-let: '10px'" v-if="formData.addclues == ''" @click="addclues">添加线索</t-button>
                    <p v-else>
                        <span>已添加线索1</span>
                        <t-button style="margin-let: '10px'">修改线索</t-button>
                    </p>
                </t-form-item>
                <t-form-item style="padding-top: 8px">
                    <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
                    <t-button theme="default" variant="base" type="reset">重置</t-button>
                </t-form-item>
            </t-form>
          </div>
      </Card>
      <Custom ref="Custom" @tag="customtag"/>
      <Dmscript ref="Dmscript" :title="dmtitle" :tent="formData.screen"/>
      <Editrole ref="Editrole" :tent="formData.screen"/>
      <Addclues ref="Addclues"/>
  </div>
</template>

<script>
import Card from '@/components/card/index.vue'; // 导入卡片
import { SearchIcon } from 'tdesign-icons-vue';
import { Icon } from 'tdesign-icons-vue'; // 导入icon
import Custom from './custom.vue' 
import Dmscript from './dmscript.vue'
import Editrole from './editrole.vue'
import Addclues from './addclues.vue'

const INITIAL_DATA = {
  file1: [], // 头像上传
  time: ['14:22:22',"12:30:33"], // 时长
  name: '', // 剧本名
  author: '', // 剧本作者 
  screen: '', // 剧本幕数
  scripttag: [], // 剧本标签
  Introduction: '', //  剧本简介
  dmscript: '', // dm剧本 
  classification : '', // 线索分类
  addclues: '', // 添加线索
  role: [], // 角色头像
//   status: false,
};

export default {
    name: 'addscript',
    components: {
        SearchIcon,
        Card,
        Icon,
        Custom,
        Dmscript,
        Editrole,
        Addclues
    },
    data() {
        return {
            dmtitle: '新增dm剧本', // dm剧本头部
            formData: { ...INITIAL_DATA },
            tips: '请上传剧本头像',
            file1: [],
            addroles: [1],
            bodyVisible3: false, // 弹框开关
            options2: [
                { label: '云服务器', value: '1' },
                { label: '云数据库', value: '2' },
                { label: '域名注册', value: '3' },
                { label: '网站备案', value: '4' },
                { label: '对象存储', value: '5' },
                { label: '低代码平台', value: '6' },
            ],
            // 线索分类下拉
            options3: [
                { label: '云服务器', value: '1' },
                { label: '云数据库', value: '2' },
                { label: '域名注册', value: '3' },
                { label: '网站备案', value: '4' },
                { label: '对象存储', value: '5' },
                { label: '低代码平台', value: '6' },
            ],
            // 表单的校验
            rules: {
                file1: [{ required: true, message: '必填', type: 'error' }],
                time: [{ required: true, message: '剧本时常必填', type: 'error' }],
                name: [{ required: true, message: '必填', type: 'error' }],
                author: [{ required: true, message: '必填', type: 'error' }],
                screen: [{ required: true, message: '必填', type: 'error' }],
                scripttag: [{required: true, message: '必填', type: 'error'}],
                Introduction: [{required: true, message: '必填', type: 'error'}],
                dmscript: [{required: true, message: '必填', type: 'error'}],
                classification: [{required: true, message: '必填', type: 'error'}],
                addclues: [{ required: true, message: '必填', type: 'error' }]
            },
        }
    },
    methods: {
        // 编辑角色
        editrole () {
            this.$refs.Editrole.bodyVisible3 = true
        },

        // 删除角色
        rmorole (index) {
            // console.log(index);
            this.addroles.splice(index,1)
        },

        // 添加角色
        addrole () {
            this.addroles.push('1')
        },

        // 自定义标签返回的数据
        customtag (tagdata) {
            console.log(tagdata);
        },
        
        // formatResponse 返回后的 url 优先级高于接口返回的 url
        formatImgResponse() {
            return { url: 'https://tdesign.gtimg.com/site/avatar.jpg' };
        },

        // 一旦 formatResponse 返回值包含 error，便会被组件判定为上传失败
        formatResponse() {
            return { error: '网络异常，图片上传失败' };
        },

        handleFail({ file }) {
            this.$message.error(`文件 ${file.name} 上传失败`);
        },

        bodyClose3 () {
            console.log(1);
        },

        bodyClose3 () {
            this.bodyVisible3 = false
        },
        
        // 重置方法：this.$refs.reset()
        onReset() {
            this.$message.success('重置成功');
        },

         // 提交方法：this.$refs.submit()
        onSubmit({ validateResult, firstError }) {
            // this.$refs.form.validate()
            // console.log(validateResult);
            // validateResult为表单校验true则校验成功
            if (validateResult == true) {
                this.$message.success('新增剧本成功')
                this.$router.push('/detail/scriptdata')
            } else {
                this.$message.error('请检查必填项')
            }
            // console.log(validateResult, firstError);
        },

        // 自定义标签
        custom () {
            this.$refs.Custom.bodyVisible3 = true
        },

        // 修改dm剧本
        editdm () {
            this.$refs.Dmscript.bodyVisible3 = true;
            this.dmtitle = '修改dm剧本'
        },

        // 新增dm
        adddm () {
            this.$refs.Dmscript.bodyVisible3 = true;
            this.dmtitle = '新增dm剧本'
        },

        // 添加线索
        addclues () {
            this.$refs.Addclues.bodyVisible3 = true;
        }
    }
}
</script>

<style lang="less" scoped>
.username {
    border-radius: 1px solid #999;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 40px;
}

.title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
}

.const {
    width: 60%;
    margin: 0 auto;
    margin-bottom: 40px;
}

button.t-button {
    margin-left: 10px;
}
</style>